<template>
	<view class="page">
		<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="top-icon" @click="back">
				<!-- <image class="img"
					src=""
					mode="aspectFill"></image> -->
		      <u-icon name='arrow-left' size="42rpx" color="#fff"></u-icon>			
			</view>
			<view class="top-title c-primary">{{title}}</view>
		</view>
		<view :style="{height:$store.state.StatusBar.statusBar+30+`px`}"></view>
		<scroll-view scroll-y="true"  class="scr" :style="{height:pageheigh-$store.state.StatusBar.statusBar+30+`px`}">
		<view class="flex_r item" >
			<view class="item-img-box">
				<view class="item-img" style="{overflow: hidden}">
					<view class="item-img_">
						<image mode="aspectFill" class="img" :src="item.pic"></image>
					</view>
				</view>
			</view>
			<view class="flex1 ">
				<view class="text_30" style="color: #eecbab;">
					{{item.genius}}
				</view>
				<view style="height: 80rpx;"></view>
				<view class="text_30" style="color: #9894b5;font-size: 26rpx;">
					{{item.sing}}
				</view>
			</view>
		</view>
		<view class="flex_r state">
			<!-- <view class="flex_c_c state-item">
				<view class="state-item-bc"></view>
				<view class="state-item-value">
					<text class="text_36 bold_">{{item.score}}</text><text class="text_18">分</text>
				</view>
				<view class="text_20">
					近期服务1人
				</view>
			</view> -->
			<view class="flex_c_c state-item">
				<view class="state-item-bc"></view>
				<view class="state-item-value">
					<text class="text_36">{{item.price}}</text><text class="text_18">/景点</text>
				</view>
				<view class="text_18">
					每小时
				</view>
			</view>
		</view>
		<view class="" style="height: 180rpx;">
			<view class="flex_r" style="height: 60rpx;">
				<text class="text_20" style="color: gray; margin-left: 20rpx;">擅长景点:</text>
				<text class="text_24" style="color: black;margin-left: 20rpx;color: white;">{{item.area}}</text>
			</view>
			<view class="flex_r" style="height: 60rpx;">
				<text class="text_20" style="color: gray; margin-left: 20rpx;">可选位置:</text>
				<text class="text_24" style="color: black;margin-left: 20rpx;color: white;">{{item.tag}}</text>
			</view>
			<!-- <view class="flex_r" style="height: 60rpx;">
				<text class="text_20" style="color: gray; margin-left: 20rpx;">游玩时间:</text>
				<text class="text_24" style="color: black;margin-left: 20rpx;color: white;"></text>
			</view> -->
		</view>
		<text class="text_30 bold_" style="color: black; margin-left: 20rpx; color: white;">打开景点</text>
		<view style="margin: 20rpx auto; width: calc(100% - 40rpx);">
			<swiper class="swiper" circular  autoplay=true>
				<swiper-item v-for="(items,index) in list" style="border-radius: 20rpx;">
					<!-- <view class="swiper-item uni-bg-red">A</view> -->
					<image mode="aspectFill"  class="img" :src="items"></image>
				</swiper-item>				
			</swiper>
		</view>
		<view class="" style="display: flex;justify-content: space-between;" v-if="false">
			<text class="text_30 bold_" style="color: black; margin-left: 20rpx;color: white; ">用户评价</text>
			<text class="text_24 " style="color: gray; margin-right: 20rpx; " @click="gomore">全部评价 ›</text>	
		</view>
		
		<view class="flex_r fj_a fa_c" style=" height: 250rpx;background-color: rgba(246, 246, 246, 0.1);border-radius: 20rpx; margin: 20rpx auto; width: calc(100% - 40rpx);" v-if="false">
			<view style="width: 150rpx;">				
				<view class="flex_r">
					<uni-rate class="fa_c" style="line-height: 80rpx;" size='20px' readonly='false' value='1' max='1'></uni-rate>
					<text class="text_44 fa_c" style="line-height: 30rpx;" >{{item.score}}</text>
				</view>
				<text class="text_26 " style="color: gray; ">共{{pinlist.length}}条评论</text>					
			</view>
			<view>
				<view class="flex_r" style="margin-top: 20rpx;"> 
				    <text class="text_22 " style="color: gray; ">熟悉景点 {{item.score}}</text>		
					<uni-rate allowHalf='true' style="margin-left: 20rpx;" size='20px' readonly='false' :value="item.score"></uni-rate>
				</view>
				<view class="flex_r" style="margin-top: 20rpx;">
				    <text class="text_22 " style="color: gray; ">服务态度 {{item.score}}</text>		
					<uni-rate allowHalf='true' style="margin-left: 20rpx;" size='20px' readonly='false' :value="item.score"></uni-rate>
				</view>
				<view class="flex_r" style="margin-top: 20rpx;">
				    <text class="text_22 " style="color: gray; ">导游专业 {{item.score}}</text>		
					<uni-rate allowHalf='true' style="margin-left: 20rpx;" size='20px' readonly='false' :value="item.score"></uni-rate>
				</view>						
			</view>			
		</view>
		<view  class="flex_r fj_a fa_c" style="height: 100rpx;background-color:#AE244B;border-radius: 20rpx; margin: 20rpx auto; width: calc(100% - 40rpx);" @click="goMsg">
			<text class="text_34 bold_" style="color: white;">联系客服</text>	
		</view>
		<view style="height: 90rpx;"></view>
	   </scroll-view>	
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	
	
	export default {
		data() {
			return {
				$c: this.$c,
				pageheigh:0,
				pageno: 1,
				list: [],
				refresherTriggered: false,
				datalist: [],
				pinlist:[],
				item: {},
				tophigh: 0,
				userid: 0,
				title: '',
			}
		},
		onLoad(option) {
			this.pageheigh = uni.getSystemInfoSync().windowHeight;
			uni.onWindowResize((res) => {
				this.pageheigh = res.size.windowHeight;
			});
			this.tophigh = this.$store.state.StatusBar.statusBar + 31;
			
			
			this.item = JSON.parse(option.item);
			// console.log('***ert******');
			console.log(this.item);
			this.title = this.item.nick;
			if(this.item.trippic){
			this.list = this.item.trippic.split(",");	
			}		
		    if(this.list.length === 0)
			{
				this.list.push(this.item.pic);
			}
			console.log(this.list);
		},
		onShow() {
          this.pinluData();
		},
		methods: {
			to,
			back() {
				to()
			},
			goMsg()
			{
				// uni.navigateTo({
				// 	url: `/im/chat/chat?userid=` + this.item.userId + `&conversationID=C2C` + this.item.tengxuncode,
				// });
				uni.showModal({
					title: '客服',
					content: `客服QQ：2778027813 工作时间9：00-18：00`
				})
			},			
			gomore()
			{
				//console.log(this.pinlist.length+'******');
				if(this.pinlist.length >0)
				{
					uni.navigateTo({
						url: `/pages/m-pages/m-home/esportspinlun?tripId=` + this.item.id + `&onlinestatus=` + this.item.onlinestatus+`&score=`+this.item.score,
					});
				}
				
			},
			async pinluData() {
				let res = await this.$c.post('/app/newTrip/listTripComment?tripId=' + this.item.id)
				if (res.code != 0) {
					uni.navigateTo({
						url: '/im/login/login'
					});
				} else {
					this.pinlist = res.data
				}		
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		width: 100%;
		height: 100vh;
		 // background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}

	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
	    // background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx;
	}

	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}

	.top-title {
		line-height: 50rpx;
		display: block;
		height: 50rpx;
		z-index: 99;
	}

	.item {

		width: calc(100% - 40rpx);
		//width: 710rpx;
		height: 230rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 20rpx auto;
		background-color: rgba(246, 246, 246, 0.1);

		.item-img-box {
			position: relative;
			width: 300rpx;
			height: 100%;
			overflow: hidden;

			.item-img {
				position: absolute;
				top: -12rpx;
				left: -50rpx;
				width: calc(100% + 20rpx);
				height: calc(100% + 20rpx);
				transform: rotate(5deg) skew(-5deg, -5deg);
				overflow: hidden !important;
				border-radius: 0 40rpx 40rpx 0;

				.item-img_ {
					position: absolute;
					top: 0;
					right: -40rpx;
					bottom: 0;
					width: calc(100% + 20rpx);
					height: calc(100% + 20rpx);
					overflow: hidden !important;
					transform: perspective(20rpx) rotate(-5deg) skew(5deg, 5deg);
					// transform: rotate(-5deg) skew(5deg, 5deg);
					// .item-img__ {
					// 	position: absolute;
					// 	top: 0;
					// 	left: 0;
					// 	right: 0;
					// 	bottom: 0;
					// 	// transform: perspective(20rpx) rotateX(-0.6deg);
					// 	transform:perspective(20rpx) rotate(-5deg) skew(5deg, 5deg);
					// }
				}

			}
		}



	}

	.state {
		height: 130rpx;
		margin: 20rpx auto;
		width: calc(100% - 40rpx);

		.state-item {
			position: relative;
			width: calc(50% - 20rpx);
			box-sizing: border-box;
			padding: 4rpx 0 10rpx 0;
			margin-right: 20rpx;
		}

		view {
			position: relative;
			z-index: 2;
			color: #9894b5;
		}

		.state-item-value {
			color: #000;
			height: 30rpx;
			margin-bottom: 4rpx;
			line-height: 30rpx;
		}

		.state-item-bc {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			transform: rotate(5deg) skew(-5deg, -5deg);
			background-color: #eeeff3;
			border-radius: 10rpx;
		}


	}
</style>